$mini-chart-svg-height: 130px
$mc-w-1: 120px
$mc-w-3: 360px
$mc-h-h: 26px
$p-l: 10px
$p-b: 40px


#chart-overlay 
  display: none
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: transparent
  z-index: 9

.mini-chart
  z-index: 10

.chart-header
  position: absolute
  bottom: $mini-chart-svg-height + $p-b
  height: $mc-h-h
  background: darken($rs_blue, 20%)
  border: solid 5px $rs_blue
  border-top: solid 3px $rs_blue
  border-bottom: solid 3px $rs_blue
  .caption
    cursor: pointer
    height: 19px
    padding-left: 3px
    line-height: 19px
    color: #ccc
    font-size: 11px
  form.custom .custom.dropdown 
    height: 19px !important
    line-height: 19px !important
    font-size: 10px !important
    li, a, a.selector 
      height: 19px !important
      line-height: 19px !important
      font-size: 11px !important
    a 
      text-align: center
    ul 
      height: 19px * 7

.rx-chart 
  .chart-header 
    left: $p-l + $mc-w-1 * 2
    width: $mc-w-3
  .svg
    position: absolute
    bottom: $p_b
    left: $mc-w-1 * 2 + $p-l
    height: $mini-chart-svg-height
    background: #111
    opacity: 0.85
    .axis 
      font: 
        size: 10px
        family: sans-serif
      rect 
        fill: $rs_blue
    path.domain 
      fill: $rs_blue

.df-chart, .lot-chart
  .chart-header
    left: $p-l 
    width: $mc-w-1
  .svg 
    position: absolute
    bottom: $p-b
    left: $p-l
    width: $mc-w-1
    height: $mini-chart-svg-height
    background: $rs_blue
    opacity: 0.85
    rect
      width: 100
      height: 100
      fill: black

.lot-chart
  .chart-header
    left: $p-l + $mc-w-1
    width: $mc-w-1
  .svg
    left: $p-l + $mc-w-1
    width: $mc-w-1

.df-chart
  .svg
    circle, path, text
      cursor: pointer